<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="./js/common.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/blog_logo.png" alt="">
        <a class="title" href="./myblog_list.html" id="to-my-blog">回到我的主页</a>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript:logout()">注销</a>

    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="" class="avtar" alt="" id="user_photo">
                <h3 id="username"></h3>
                <a href="http://www.github.com">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span id="artCount"></span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="blog_title">我的第一篇博客</h3>
                <!-- 博客时间 -->
                <div class="date">发布时间：<span id="create_time"></span> &nbsp;&nbsp;&nbsp; 更新时间：<span
                        id="update_time"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 访问量：<span id="visits"></span></div>
                <!-- 博客正文 -->
                <div id="editorDiv">
                </div>
                <div class="like_comment">
                    <svg t="1685931822801" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2410" width="25" height="25" id="like"
                        onclick="addLikeNum()">
                        <path
                            d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                            p-id="2411"></path>

                    </svg>
                    <span id="like_num"></span>

                    <svg t="1685931870798" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4357" width="25" height="25" id="comment"
                        onclick="getComment()">
                        <path
                            d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
                            fill="black" p-id="4358"></path>
                    </svg>
                </div>
            </div>
            <!--评论区域 -->
            <div class="comment_container">
                <div id="line"></div>
                <h3>文章评论区</h3>
                <div class="push_comm">
                    <input type="text" placeholder="请在此输入您的评论" id="place">
                    <input type="button" value="发布" id="push_my_comm" onclick="mycomPush()">
                </div>
                <div id="comment_content">

                </div>
            </div>
        </div>






    </div>
    <script type="text/javascript">
        var editormd;

        function initEdit(md) {
            editormd = editormd.markdownToHTML("editorDiv", {
                markdown: md, // Also, you can dynamic set Markdown text
                // htmlDecode : true,  // Enable / disable HTML tag encode.
                // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
            });
        }




        function getAtrDetail(artId) {
            // if (artId == null || artId <= 0) {
            //     alert('参数非法!')
            //     return
            // }
            jQuery.ajax({
                url: "art/getArt?artId=" + artId,
                type: "get",
                success: function (result) {
                    if (result != null && result.code == 200) {
                        jQuery("#blog_title").text(result.data.title)
                        jQuery('#create_time').text(result.data.createTime)
                        jQuery('#update_time').text(result.data.updateTime)
                        jQuery('#visits').text(result.data.visits)
                        jQuery('#like_num').text(result.data.likeNum)
                        initEdit(result.data.content)
                        getArtUser(result.data.userId)
                    } else {
                        alert('文章信息加载失败，请重试！')
                    }
                }
            })
        }

        getAtrDetail(getURlParam('id'))

        function getArtUser(userId) {
            if (userId == null || userId <= 0) {
                alert('参数非法！')
                return
            }
            jQuery.ajax({
                url: "user/get_id?userId=" + userId,
                type: "get",
                success: function (result) {
                    if (result != null && result.code == 200 && result.data.userId > 0) {
                        jQuery('#artCount').text(result.data.artCount)
                        jQuery('#username').text(result.data.nickname)
                        jQuery('#user_photo').attr('src', result.data.photo)
                    } else {
                        alert('获取作者信息失败，请重试！')
                    }
                }
            })
        }

        function incrementVisits(artId) {
            if (artId == null || artId <= 0) {
                return;
            }
            jQuery.ajax({
                url: "art/increment?artId=" + artId,
                type: "get"
            })
        }

        incrementVisits(getURlParam('id'))

        function logout() {
            if (confirm('确认注销？')) {
                jQuery.ajax({
                    url: "user/logout",
                    type: "get",
                    success: function (result) {
                        if (result != null && result.code == 200) {
                            location.href = "login.html"
                        } else {
                            alert('退出登录失败，请重试！')
                        }
                    }
                })
            }
        }

        function addLikeNum() {

            //先验证它是否已经点过赞了
            var $like = jQuery('#like path')
            var likeState = $like.attr('fill') == undefined ? 'add' : 'sub'
            var artId = getURlParam('id')
            if (artId == null) {
                alert('非法参数')
                return
            }
            if ($like.attr('fill') == undefined) {
                $like.attr('fill', 'red')
            } else {
                $like.removeAttr('fill')
            }

            jQuery.ajax({
                url: "/art/oper_like",
                type: "post",
                data: {
                    "likeState": likeState,
                    "artId": artId
                },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data != null) {
                        jQuery('#like_num').text(result.data)
                    } else if (result != null && result.code != 200) {
                        alert(result.msg)
                        location.href = 'login.html'
                    }
                }
            })
        }

        function getComment() {
            var artId = getURlParam("id")
            if (artId == null) {
                alert('非法参数')
                return
            }
            jQuery.ajax({
                url: "/comment/list",
                type: "post",
                data: {
                    "artId": artId
                },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data != null) {
                        if (result.data.length == 0) {
                            jQuery('#comment_content').text('暂无评论！')
                            return;
                        }
                        var comments = ''
                        for (var i = 0; i < result.data.length; i++) {
                            var comment = result.data[i]
                            comments += `<div class="commentator">
                        <img src="./img/user_photo.png" alt="">
                        <span class="or_name">${comment.nickname}</span>
                        <span class="push_time">${comment.createTime}</span>
                        <p class="or_content">${comment.content}</p>
                    </div>`
                        }
                        jQuery('#comment_content').html(comments)
                    } else if (result != null && result.code != 200) {
                        alert(result.msg)
                    }
                }
            })
        }

        //获取博客对应的评论信息
        getComment()

        function mycomPush() {
            var artId = getURlParam("id")
            if (artId == null) {
                alert('非法参数')
                return
            }
            var $comment = jQuery('#place')
            if ($comment.val() == '') {
                alert('请先输入评论！')
                $comment.focus()
                return
            }
            jQuery.ajax({
                url: "/comment/add",
                type: "post",
                data: {
                    "artId": artId,
                    "content": $comment.val()
                },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data == 1) {
                        alert('发布成功！')
                        $comment.val('')
                        getComment()
                    } else if (result != null && result.code != 200) {
                        alert(result.msg)
                    }
                }
            })
        }


    </script>
</body>

</html>